<template>
  <!-- 顶部 -->
    <div class="header">
        <slot name="left" />
        <div class="title_text" :class="title == this.$store.state.address.name ? '' : 'myh1'">{{title}}</div>
        <slot name="right" />
    </div>
</template>

<script>
    export default {
        props: ['title'],
        name: 'Top_header',
        computed: {
            // title_length() {
            //     return this.title.length;
            // }
        }
    }
</script>

<style lang="stylus" scoped>
    .header
        position fixed
        top 0px
        left 0px
        right 0px
        height 55px
        background-color #02a774
        display flex
        justify-content space-between
        align-items center
        padding 0 10px
        z-index 999
        div
            color #ffffff
            &.search
                font-size 20px !important
        .title_text
            text-overflow ellipsis !important
            width 200px
            white-space nowrap
            overflow hidden
            text-align center
            line-height 55px
            margin 0 auto
        .myh1
            color #fff
            font-size 28px
            line-height 55px
            text-shadow 1px 1px 2px black 
</style>